<template>
  <view class="text-detail-page">
    <!-- 状态栏占位 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- #endif -->
    
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <image src="/static/Images/notice/Fanhui.png" class="back-icon"></image>
      </view>
      <view class="title">详情</view>
      <view class="placeholder"></view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 文章内容 -->
      <view v-else-if="articleData.id" class="article-container">
        <!-- 文章标题 -->
        <view class="article-title">
          {{ articleData.title || '暂无标题' }}
        </view>
        
        <!-- 作者和发布时间 -->
        <view class="article-meta">
          <view v-if="articleData.avarter" class="author">
            作者：{{ articleData.avarter }}
          </view>
          <view class="publish-time">
            {{ articleData.create_time || '暂无时间' }}
          </view>
        </view>

        <!-- 文章封面图 -->
        <view v-if="articleData.imgs" class="article-cover">
          <image :src="articleData.imgs" class="cover-image" mode="aspectFill"></image>
        </view>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 文章内容 -->
        <view class="article-content">
          <rich-text class="content-text" :nodes="articleData.content || '暂无内容'"></rich-text>
        </view>
      </view>
      
      <!-- 无数据状态 -->
      <view v-else class="no-data">
        <text class="no-data-text">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script>
import { indexApi } from '@/utils/api'

export default {
  name: 'ArticleDetail',
  data() {
    return {
      // 状态栏高度
      statusBarHeight: 0,
      articleId: '',
      articleData: {},
      loading: false
    }
  },
  onLoad(options) {
    console.log('页面加载参数:', options)
    
    // #ifdef MP-WEIXIN
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    // 获取胶囊按钮信息
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    // 计算状态栏高度
    this.statusBarHeight = systemInfo.statusBarHeight + (menuButtonInfo.top - systemInfo.statusBarHeight) + menuButtonInfo.height + 10
    // #endif
    
    // 支持多种参数名：article_id（新）、id（兼容旧版）
    if (options.article_id) {
      this.articleId = options.article_id
      this.getArticleDetail()
    } else if (options.id) {
      this.articleId = options.id
      this.getArticleDetail()
    } else {
      uni.showToast({
        title: '文章ID缺失',
        icon: 'none'
      })
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    async getArticleDetail() {
      if (this.loading || !this.articleId) return
      
      try {
        this.loading = true
        console.log('获取文章详情，ID:', this.articleId)
        
        const response = await indexApi.findArticleById(this.articleId)
        console.log('文章详情接口响应:', response)
        
        if (response && response.code === 1) {
          // API 返回的数据在 msg 字段中
          this.articleData = response.msg || {}
          console.log('设置文章详情数据:', this.articleData)
        } else {
          console.log('文章详情接口返回失败，code:', response?.code)
          uni.showToast({
            title: response?.msg || '获取详情失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取文章详情失败:', error)
        uni.showToast({
          title: '获取详情失败，请稍后再试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* 状态栏样式 */
.status-bar {
  width: 100%;
  background: linear-gradient(180deg, #FF7B80 0%, rgba(244,234,234,0) 100%);
}

.text-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}

.placeholder {
  width: 44px;
  height: 44px;
}

.content {
  padding: 20px 16px;
  background-color: #ffffff;
  margin-top: 8px;
}

.article-title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 12px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.author {
  font-size: 14px;
  color: #666666;
  font-weight: 500;
}

.publish-time {
  font-size: 14px;
  color: #999999;
}

.article-category {
  margin-bottom: 12px;
}

.category-tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #ff4444;
  color: #ffffff;
  font-size: 12px;
  border-radius: 12px;
  font-weight: 500;
}

.article-cover {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

.divider {
  height: 1px;
  background-color: #f0f0f0;
  margin-bottom: 20px;
}

.article-content {
  line-height: 1.6;
}

.content-text {
  font-size: 16px;
  color: #666666;
  line-height: 1.6;
  word-break: break-all;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.loading-text {
  font-size: 16px;
  color: #999999;
}

.article-container {
  width: 100%;
}

.article-desc {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #ff4444;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.no-data-text {
  font-size: 16px;
  color: #999999;
}
</style>